<!-- 地图 -->
<template>
  <div id="infoMap"></div>
</template>
<script setup lang='ts'>
import { reactive } from 'vue'
import useMap from '@/components/UseAMap/index'
import useWarehouseStore from '@/store/modules/warehouse'
const WarehouseStore = useWarehouseStore()
const state = reactive<any>({
  layerList: [],
  type: ''
})
const prop = defineProps(['type'])
const [map, amap] = useMap('infoMap', {
  zoom: 16,
  center: [WarehouseStore.infoList.lng, WarehouseStore.infoList.lat]
  // mapStyle: 'amap://styles/dark'
}, initMap)
//  变压器图层
const transformerLayerDraw = (value: string) => {
  state['transformer'] = new amap.value.TileLayer.WMS({
    url: "http://192.168.90.146:8080/geoserver/ty/wms",
    blend: true, // 地图级别切换时，不同级别的图片是否进行混合
    tileSize: 256, // 加载WMS图层服务时，图片的分片大小
    zIndex: 199,
    dataZooms: [1, 20],
    params: {
      SERVICE: "WMS",
      VERSION: "1.1.1",
      REQUEST: 'GetMap',
      FORMAT: "image/png",
      TRANSPARENT: true,
      LAYERS: `ty:transformer`,
      exceptions: 'application/vnd.ogc.se_inimage',
      SRS: 'EPSG:3857',
      STYLES: '',
      CQL_FILTER: value
    }
  })
  state['transformer'].setMap(map.value)
}
//  回路图层
const loopLayerDraw = (value: string) => {
  state['loop'] = new amap.value.TileLayer.WMS({
    url: "http://192.168.90.146:8080/geoserver/ty/wms",
    blend: true, // 地图级别切换时，不同级别的图片是否进行混合
    tileSize: 256, // 加载WMS图层服务时，图片的分片大小
    zIndex: 99,
    dataZooms: [1, 20],
    params: {
      SERVICE: "WMS",
      VERSION: "1.1.1",
      REQUEST: 'GetMap',
      FORMAT: "image/png",
      TRANSPARENT: true,
      LAYERS: `ty:loop`,
      exceptions: 'application/vnd.ogc.se_inimage',
      SRS: 'EPSG:3857',
      STYLES: '',
      CQL_FILTER: value
    }
  })
  state['loop'].setMap(map.value)
}
//  灯杆图层
const lampPostLayerDraw = (value: string) => {
  state['lampPost'] = new amap.value.TileLayer.WMS({
    url: "http://192.168.90.146:8080/geoserver/ty/wms",
    blend: true, // 地图级别切换时，不同级别的图片是否进行混合
    tileSize: 256, // 加载WMS图层服务时，图片的分片大小
    zIndex: 99,
    dataZooms: [1, 20],
    params: {
      SERVICE: "WMS",
      VERSION: "1.1.1",
      REQUEST: 'GetMap',
      FORMAT: "image/png",
      TRANSPARENT: true,
      LAYERS: `ty:lamp_post`,
      exceptions: 'application/vnd.ogc.se_inimage',
      SRS: 'EPSG:3857',
      STYLES: '',
      CQL_FILTER: value
    }
  })
  state['lampPost'].setMap(map.value)
}
//  灯图层
const lampLayerDraw = (value: string) => {
  state['lamp'] = new amap.value.TileLayer.WMS({
    url: "http://192.168.90.146:8080/geoserver/ty/wms",
    blend: true, // 地图级别切换时，不同级别的图片是否进行混合
    tileSize: 256, // 加载WMS图层服务时，图片的分片大小
    zIndex: 99,
    dataZooms: [1, 20],
    params: {
      SERVICE: "WMS",
      VERSION: "1.1.1",
      REQUEST: 'GetMap',
      FORMAT: "image/png",
      TRANSPARENT: true,
      LAYERS: `ty:lamp`,
      exceptions: 'application/vnd.ogc.se_inimage',
      SRS: 'EPSG:3857',
      STYLES: '',
      CQL_FILTER: value
    }
  })
  state['lamp'].setMap(map.value)
}
//  单灯控制器图层
const singleLampLayerDraw = (value: string) => {
  state['singleLamp'] = new amap.value.TileLayer.WMS({
    url: "http://192.168.90.146:8080/geoserver/ty/wms",
    blend: true, // 地图级别切换时，不同级别的图片是否进行混合
    tileSize: 256, // 加载WMS图层服务时，图片的分片大小
    zIndex: 99,
    dataZooms: [1, 20],
    params: {
      SERVICE: "WMS",
      VERSION: "1.1.1",
      REQUEST: 'GetMap',
      FORMAT: "image/png",
      TRANSPARENT: true,
      LAYERS: `ty:single_lamp`,
      exceptions: 'application/vnd.ogc.se_inimage',
      SRS: 'EPSG:3857',
      STYLES: '',
      CQL_FILTER: value
    }
  })
  state['singleLamp'].setMap(map.value)
}
//  电缆井图层
const wellLayerDraw = (value: string) => {
  state['well'] = new amap.value.TileLayer.WMS({
    url: "http://192.168.90.146:8080/geoserver/ty/wms",
    blend: true, // 地图级别切换时，不同级别的图片是否进行混合
    tileSize: 256, // 加载WMS图层服务时，图片的分片大小
    zIndex: 99,
    dataZooms: [1, 20],
    params: {
      SERVICE: "WMS",
      VERSION: "1.1.1",
      REQUEST: 'GetMap',
      FORMAT: "image/png",
      TRANSPARENT: true,
      LAYERS: `ty:cable_well`,
      exceptions: 'application/vnd.ogc.se_inimage',
      SRS: 'EPSG:3857',
      STYLES: '',
      CQL_FILTER: value
    }
  })
  state['well'].setMap(map.value)
}
//  灯杆附属物图层
const tailpieceLayerDraw = (value: string) => {
  state['tailpiece'] = new amap.value.TileLayer.WMS({
    url: "http://192.168.90.146:8080/geoserver/ty/wms",
    blend: true, // 地图级别切换时，不同级别的图片是否进行混合
    tileSize: 256, // 加载WMS图层服务时，图片的分片大小
    zIndex: 99,
    dataZooms: [1, 20],
    params: {
      SERVICE: "WMS",
      VERSION: "1.1.1",
      REQUEST: 'GetMap',
      FORMAT: "image/png",
      TRANSPARENT: true,
      LAYERS: `ty:lamp_post_tailpiece`,
      exceptions: 'application/vnd.ogc.se_inimage',
      SRS: 'EPSG:3857',
      STYLES: '',
      CQL_FILTER: value
    }
  })
  state['tailpiece'].setMap(map.value)
}
function initMap() {

  if (prop.type === 'transformer') {  //  变压器
    const mc = WarehouseStore.infoList.mc.replace('#', '%23')
    transformerLayerDraw(`mc like '%25${mc}%25'`)
    loopLayerDraw(`sspdssmc like '%25${mc}%25'`)
    lampPostLayerDraw(`sspdssmc like '%25${mc}%25'`)
    lampLayerDraw(`sspdssmc like '%25${mc}%25'`)
  } else if (prop.type === 'loop') {  //  回路
    const str = WarehouseStore.infoList.sspdssmc.replace('#', '%23')
    const mc = WarehouseStore.infoList.mc.replace('#', '%23')
    loopLayerDraw(`sspdssmc like '%25${str}%25' and mc like '%25${mc}%25'`)
    lampLayerDraw(`sspdssmc like '%25${str}%25' and sshlmc like '%25${mc}%25'`)
    transformerLayerDraw(`mc like '%25${str}%25'`)
  } else if (prop.type === 'lamp') {  //  灯
    const mc = WarehouseStore.infoList.mc.replace('#', '%23')
    const sspdssmc = WarehouseStore.infoList.sspdssmc.replace('#', '%23')
    const sshlmc = WarehouseStore.infoList.sshlmc.replace('#', '%23')
    const ssdgmc = WarehouseStore.infoList.ssdgmc.replace('#', '%23')
    lampLayerDraw(`mc like '%25${mc}%25'`)
    transformerLayerDraw(`mc like '%25${sspdssmc}%25'`)
    loopLayerDraw(`sspdssmc like '%25${sspdssmc}%25' and mc like '%25${sshlmc}%25'`)
    lampPostLayerDraw(`mc like '%25${ssdgmc}%25'`)
  } else if (prop.type === 'lampPost') {  //  灯杆
    const mc = WarehouseStore.infoList.mc.replace('#', '%23')
    const sspdssmc = WarehouseStore.infoList.sspdssmc.replace('#', '%23')
    lampPostLayerDraw(`mc like '%25${mc}%25'`)
    transformerLayerDraw(`mc like '%25${sspdssmc}%25'`)
    lampLayerDraw(`ssdgmc like '%25${mc}%25'`)
  } else if (prop.type === 'singleLamp') { //  单灯控制器
    const mc = WarehouseStore.infoList.mc.replace('#', '%23')
    const sspdssmc = WarehouseStore.infoList.sspdssmc.replace('#', '%23')
    const sshlmc = WarehouseStore.infoList.sshlmc
    singleLampLayerDraw(`mc like '%25${mc}%25'`)
    transformerLayerDraw(`mc like '%25${sspdssmc}%25'`)
    loopLayerDraw(`sspdssmc like '%25${sspdssmc}%25' and mc like '%25${sshlmc}%25'`)
  } else if (prop.type === 'well') { //  电缆井
    const mc = WarehouseStore.infoList.mc.replace('#', '%23')
    const ssdgmc = WarehouseStore.infoList.ssdgmc.replace('#', '%23')
    wellLayerDraw(`mc like '%25${mc}%25'`)
    lampPostLayerDraw(`mc like '%25${ssdgmc}%25'`)
  } else if (prop.type === 'tailpiece') { //  灯杆附属物
    const mc = WarehouseStore.infoList.mc.replace('#', '%23')
    const ssdgmc = WarehouseStore.infoList.ssdgmc.replace('#', '%23')
    const sspdssmc = WarehouseStore.infoList.sspdssmc.replace('#', '%23')
    const sshlmc = WarehouseStore.infoList.sshlmc
    tailpieceLayerDraw(`mc like '%25${mc}%25'`)
    lampPostLayerDraw(`mc like '%25${ssdgmc}%25'`)
    transformerLayerDraw(`mc like '%25${sspdssmc}%25'`)
    loopLayerDraw(`sspdssmc like '%25${sspdssmc}%25' and mc like '%25${sshlmc}%25'`)
  }
}

</script>

<style scoped lang="scss">
#infoMap {
  width: 100%;
  height: 100%;
}
</style>